<template>
	<view class="content">
		<view v-if='cartList && cartList.length > 0' class="cart-page">
			<!-- 商品列表 -->
			<scroll-view scroll-y class="goods-list">
				<view v-for="(item,index) in cartList" :key="item.id" class="goods-item">
					<checkbox-group @change="() => toggleSelect(index)">
						<checkbox :checked="item.selected" />
					</checkbox-group>

					<image :src="item.image" mode="aspectFill" class="goods-image"></image>

					<view class="goods-info">
						<view class="goods-title">{{item.name}}[{{item.specification}}]</view>
						<view class="goods-price">¥{{item.price}}</view>
						<view class="goods-action">
							<view class="quantity-control">
								<button @click="changeQuantity(index, -1)" size="mini">-</button>
								<input type="number" v-model.number="item.quantity" @blur="validateQuantity(index)" />
								<button @click="changeQuantity(index, 1)" size="mini">+</button>
							</view>
						</view>
						<view style='padding-top:8px'>
							<u-line></u-line>
						</view>
					</view>
				</view>

			</scroll-view>
			<!-- <view v-if='exchangeProducts && exchangeProducts.length > 0' style='margin-bottom: 50rpx;'>
				<view style='margin:10px'>
					<u-divider text="超值换购"></u-divider>
				</view>
				<view>
					<view class="e-container">
						<scroll-view scroll-x class="e-scroll-view" :show-scrollbar="false">
							<view class="e-goods-list">
								<view v-for="(item, index) in exchangeProducts" :key="index" class="e-goods-item">
									<view class="e-image-container">
										<image :src="item.product.__metadata.cover" mode="aspectFill"
											class="e-product-image" />
									</view>

									<view class="e-info">
										<text class="e-name">{{ item.product.__metadata.name }}</text>
										<text class="e-price">¥{{ item.price }}</text>
									</view>

									<u-button text="点击换购" size="mini" type="warning" @click="addCard(index)" shape='circle' />
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view> -->
			<view style='margin-bottom: 50rpx;'>

			</view>
			<!-- 底部操作栏 -->
			<view class="footer">
				<u-row>
					<u-col span='2'>
						<view>
							<checkbox-group @change="toggleAll">
								<checkbox :checked="isAllSelected" />全选
							</checkbox-group>
						</view>
					</u-col>
					<u-col span='1'>
						<view>
							<u-icon name="trash" size='26' @click='toDelete'></u-icon>
						</view>
					</u-col>
					<u-col span='5'>
						<view>
							<text class="total-price">合计：¥{{totalPrice}}</text>

						</view>
					</u-col>
					<u-col span='4'>
						<view>
							<button @click="handleCheckout" type="primary">结算({{selectedCount}})</button>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view v-else style='margin-top:30vh'>
			<u-empty mode="car">
			</u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cartList: [],
				selectedAddress: null,
				exchangeProducts: []
			}
		},
		onLoad() {

		},
		onShow() {
			let carts = uni.getStorageSync('carts')
			this.cartList = carts
			this.toggleAll()
			// this.getExchangeProduct()
		},
		computed: {
			totalPrice() {
				return this.cartList.reduce((sum, item) => {
					return item.selected ? sum + item.price * item.quantity : sum
				}, 0).toFixed(2)
			},
			isAllSelected() {
				return this.cartList.length > 0 && this.cartList.every(item => item.selected)
			},
			selectedCount() {
				return this.cartList.filter(item => item.selected).length
			}
		},
		methods: {
			// 查询可换购的产品
			// getExchangeProduct() {
			// 	this.request.get(`api/specifications`, {
			// 		'@filter': `entity.getProduct().getCategory().getType().getSlug() == 'ExchangePurchase' && entity.getRemains() > 0 && entity.getProduct().getIsOnSale() == true`,
			// 		'@expands': "['entity.product']"
			// 	}).then((res) => {
			// 		console.log('res', res.data)
			// 		this.exchangeProducts = res.data
			// 	})
			// },
			changeQuantity(index, step) {
				// 判断如果有remains的，不能超过remains
				if (this.cartList[index].remains && this.cartList[index].quantity >= this.cartList[index].remains && step > 0) {
					uni.showToast({
						title: '达到限购上限！',
						icon: 'none'
					})
					return
				}
				const newVal = this.cartList[index].quantity + step
				if (newVal > 0) {
					this.cartList[index].quantity = newVal
				}
			},
			validateQuantity(index) {
				if (this.cartList[index].quantity < 1) {
					this.cartList[index].quantity = 1
				}
			},
			toDelete() {
				uni.showModal({
					title: '提示',
					content: '是否删除选中？',
					success: (res) => {
						if (res.confirm) {
							let carts = []
							for (let i of this.cartList) {
								if (!i.selected) {
									carts.push(i)
								}
							}
							this.cartList = carts
							uni.setStorageSync('carts', carts)
						}
					}
				})
			},
			addCard(index) {
				const item = this.exchangeProducts[index]
				this.exchangeProducts.splice(index, 1)
				let data = {
					id: item.id,
					image: item.product.__metadata.cover,
					name: item.product.__metadata.name,
					price: item.price,
					quantity: 1,
					selected: true,
					specification: item.name,
					remains: item.remains
				}
				this.cartList.push(data)
			},
			toggleSelect(index) {
				this.cartList[index].selected = !this.cartList[index].selected
			},
			toggleAll() {
				const targetStatus = !this.isAllSelected
				this.cartList.forEach(item => item.selected = targetStatus)
			},
			handleCheckout() {
				if (this.selectedCount === 0) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					})
					return
				}
				let carts = []
				let orderCarts = []
				for (let i of this.cartList) {
					if (i.selected) {
						orderCarts.push(i)
					} else {
						carts.push(i)
					}
				}
				uni.setStorageSync('carts', carts)
				uni.setStorageSync('orderCarts', orderCarts)
				uni.navigateTo({
					url: '/pages/cart/order'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart-page {
		padding-bottom: 100rpx;
	}

	.address-card {
		padding: 20rpx;
		margin: 20rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.goods-list {
		// height: calc(100vh - 300rpx);
	}

	.goods-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin: 0 20rpx 20rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
		margin: 0 20rpx;
	}

	.goods-info {
		flex: 1;
	}

	.quantity-control {
		display: flex;
		align-items: center;
	}

	.quantity-control input {
		width: 80rpx;
		text-align: center;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		/* 	  display: flex;
	  justify-content: space-between; */
		align-items: center;
		padding: 20rpx;
		background: #fff;
		border-top: 1rpx solid #eee;
	}

	.footer-left {
		display: flex;
		align-items: center;
	}

	.total-price {
		color: #f40;
		font-weight: bold;
		float: right;
		margin-right: 10px;
		font-size: 18px;
	}

	.goods-price {
		color: #f40;
		margin: 3px 0px;
	}

	.goods-title {
		color: #606266;
		width: 100%;
		overflow: hidden;
	}

	.e-container {
		padding: 20rpx;
		background-color: #f3f3f3;
	}

	.e-scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.e-goods-list {
		display: inline-flex;
		padding: 5px;
	}

	.e-goods-item {
		display: flex;
		flex-direction: column;
		width: 30vw;
		background-color: #fff;
		padding:5px;
		border-radius: 10px;
		margin-right: 20rpx;
		flex-shrink: 0;

		&:last-child {
			margin-right: 0;
		}
	}

	.e-image-container {
		position: relative;
		width: 100%;
		padding-top: 100%;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.e-product-image {
		position: absolute;
		top: 5%;
		left: 5%;
		width: 90%;
		height: 90%;
		border-radius: 10px;
	}

	.e-info {
		display: flex;
		flex-direction: column;
		padding: 15rpx 5rpx;
	}

	.e-name {
		font-size: 26rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
		height:38px;
		overflow: hidden;
	}

	.e-price {
		font-size: 30rpx;
		color: #e43d33;
		font-weight: bold;
	}
</style>